<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 这是个iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 全屏显示-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- 不要让设备识别电话号码和邮箱地址-->
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <!-- DNS预解析-->
    <meta http-equiv="x-dns-prefetch-control" content="on">

    <link href="../css/common/mui.min.css" rel="stylesheet">
    <link href="../css/common/reset.css" rel="stylesheet">
    <link href="../css/common/common.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/spot-check.css" rel="stylesheet">
    <link href="../css/common/mui.min.css" rel="stylesheet">
    <link href="../css/common/ydui.css" rel="stylesheet">

    <script src="../js/zepto-1.1.4.min.js"></script>
    <script src="../js/mui.min.js"></script>
    
    <title>特训抽查</title>
    
  </head>
  <body>
    <div class="spot-check">
        <div class="select-list">
            <div class="item org">
                <input type="text" readonly placeholder="添加组织及人员">
                <span class="mui-icon mui-icon-arrowright"></span>
                <i class="icon"></i>
            </div>
            <div class="item course">
                <input type="text" readonly placeholder="选择课程">
                <span class="mui-icon mui-icon-arrowright"></span>
                <i class="icon"></i>
            </div>

            <!-- 已选 -->
            <div class="selected-box">
                <div class="title">
                    <span>已选:</span>
                </div>
                <div class="selected-container">
                    <div class="selected-item">
                        <span>华东区-上海-长宁、静安</span>
                        <span class="close">x</span>
                    </div>
                    <div class="selected-item">
                        <span>华东区-上海-长宁-茅台路店-胡型选、陈秀琴</span>
                        <span class="close">x</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-box">
            <button class="btn-lexus">生成抽查</button>
        </div>
    </div>

    <!-- 选择课程 -->
    <div class="select-modal-1 select-course" style="display: none">
        <div class="select-container">
            <div class="select-header">
                <span class="left">取消</span>                
                <span class="left">请选择课程</span>
                <span class="right">确定</span>
            </div>
            <div class="select-warpper mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="item">
                        <span class="icon"></span>
                        <span>全选</span>
                    </div>
                    <div class="item">
                        <span class="icon"></span>
                        <span>产品亮点1</span>
                    </div>
                    <div class="item">
                        <span class="icon"></span>
                        <span>产品亮点2</span>
                    </div>
                    <div class="item">
                        <span class="icon"></span>
                        <span>市场销售策略</span>
                    </div>
                    <div class="item">
                        <span class="icon"></span>
                        <span>竞品分析</span>
                    </div>
                    <div class="item">
                        <span class="icon"></span>
                        <span>竞品分析</span>
                    </div>
                    <div class="item">
                        <span class="icon"></span>
                        <span>竞品分析</span>
                    </div>
                </div>             
            </div>
        </div>
    </div>


    <script src="../js/remset.js"></script>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://static.ydcss.com/uploads/ydui/ydui.citys.js"></script>
    <script src="../js/ydui.js"></script>

    <script>
        mui('.mui-scroll-wrapper').scroll({
            scrollY: true, // 是否竖向滚动
            scrollX: false, // 是否横向滚动
            startX: 0, // 初始化时滚动至x
            startY: 0, // 初始化时滚动至y
            indicators: true, // 是否显示滚动条
            deceleration: 0.0005, // 阻尼系数,系数越小滑动越灵敏 flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            bounce: true // 是否启用回弹
        });

        /* 课程 */
        $('.course').click(function() {
            $('.select-course').show()
        })
        $('.select-course .right').click(function() {
            $('.select-course').hide()
        })
        $('.select-course .select-header span').first().click(function() {
            $('.select-course').hide()
        })
        // 多选事件
        var courseDom = $('.select-course .item')

        courseDom.not(courseDom.first()).click(function() {
            $(this).hasClass('active') ? $(this).removeClass('active') : $(this).addClass('active')
        })
        // 全选点击事件
        courseDom.first().click(function() {
            var hasActiveCls = $(this).hasClass('active')

            hasActiveCls ? $(this).removeClass('active') : $(this).addClass('active')

            hasActiveCls ? selAll(false) : selAll(true)
        })

        function selAll(active) {
            courseDom.not(courseDom.first()).each(function() {
                active 
                    ? !$(this).hasClass('active') && $(this).addClass('active')
                    : $(this).hasClass('active') && $(this).removeClass('active')
            })
        }

        // 取消选择 
        $('.close').click(function () {
            $(this).parent('.selected-item').hide()
        })
    </script>
  </body>
</html>